<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>二维码</title>
<!--    导入js-->
    <script type="text/javascript" src="js/jquery.1.8.3.min.js"></script>
    <script type="text/javascript" src="js/jquery.qrcode.min.js"></script>
</head>
<body>
<!-- 定义一个订单号input表单 和 申请支付点击按钮 -->
<div style="text-align:center">
    <input id="orderNumber" type="text"/>
    <button type="button" onclick=applyPay()>申请支付!</button>
</div>

<!-- 2.提供一个div用于显示二维码 -->
<div style="text-align:center" id="qrcode"></div>
</body>

<!-- 3.使用qrcode.js生成二维码 -->
<script type="text/javascript">
    // 申请支付按钮点击事件
    function applyPay() {
        //获取订单号input表单的value值
        let orderNumber = $('#orderNumber').val();
        //发送Ajax请求
        $.get("/notify/payment?orderNumber=" + orderNumber, function (res) {
            createQRCode(res.data)
        });
    }

    // 生成二维码
    function createQRCode(url) {
        $('#qrcode').makeQRCode({
            minVersion: 6, //二维码密度, 取值: 0-10
            fill: '#666', //二维码颜色
            background: '#fff', //二维码背景颜色
            text: url, //扫码时获取到的值
            size: 300, //二维码大小,单位是像素
            radius: 20, //圆滑度,取值50以内
            quiet: 4, //二维码边框
            mode: 2, //显示模式, 取值: 不显示LOGO:0 / 文字且占整行:1 / 文字居中:2 / 图片且占整行:3 / 图片居中:4
            mSize: 10, //logo大小
            label: '传智教育', //logo文字
            fontname: '微软雅黑', //logo字体名
            fontcolor: 'green', //logo字体颜色
        });
    }
</script>
</html>